import {
  StyleSheet,
  SafeAreaView,
  Text,
  View,
  Button,
  Alert,
  Dimensions,
  FlatList,
} from 'react-native';
import React from 'react';
// 公共样式样式
import scss from '@/assets/scss/_base.scss';
import PullRefreshList from '@/components/PullRefreshList';

export default function User({navigation, route}) {
  const onPressLearnMore = () => {
    Alert.alert('提示', '你点击了按钮');
    navigation.navigate('About');
  };

  const DATA = [
    {
      id: 'bd17acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-4145571e29d72',
      title: 'Third Item',
    },
    {
      id: 'bd7ac2bea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-1445571e29d72',
      title: 'Third Item',
    },
    {
      id: 'bd7acbgea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-1455371e29d72',
      title: 'Third Item',
    },
  ];

  const Item = ({title}) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );

  return (
    <SafeAreaView>
      <Text>当前屏幕的宽度:{Dimensions.get('window').width + '\n'}</Text>
      <Text>当前屏幕的高度:{Dimensions.get('window').height + '\n'}</Text>
      <Text style={[scss.font20]}>home?</Text>
      <Text style={styles.mainBg}>home?</Text>
      <Text>home?</Text>
      <Button onPress={onPressLearnMore} title="Learn More" />
      <View style={scss.dFlex}>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </View>
      <Text>FlatList</Text>
      {/* <FlatList
        data={DATA}
        renderItem={({item}) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      /> */}
      <PullRefreshList />
    </SafeAreaView>
  );
}

// 自定义样式
const styles = StyleSheet.create({
  mainBg: {
    backgroundColor: 'yellow',
    color: 'green',
  },
});
